import React, {Component} from 'react';
import {Button, Card, Space, Table, Modal} from "antd";
import{mockCategoryData} from '../../mockjs/index';
import {PlusOutlined,ArrowRightOutlined} from '@ant-design/icons'
import {getCategoryList, getProductList} from "../../api";
import AddModal from "./addModal";
import EditForm from './editForm'


//品类管理
// const Category: React.FC = () =>
class Category extends Component {
    state = {
        mockCategoryData1:mockCategoryData,
        showAdd:false,//添加列表展示
        open:false,//修改分类弹窗展示
        loading:false,
        parentId:'0',//当前显示的分类列表
        parentName: '',//当前显示的分类列表父类名称
        subCategorys:[],
        // categorys:[],//一级分类列表
        id:'',
    }

    getData= async ()=> {
        const {parentId,parentName} =this.state
        this.setState({loading:true})
        const result =await getCategoryList()
        this.setState({loading:false})
        const category = result.data.data
        if(parentId==='0'){
             // 更新一级分类状态
            this.setState({category})
        }else {
            //更新二级分类状态
            this.setState({subCategorys:category})
        }
    }

    //显示一级分类对象的二级列表
    showSubCategorys =(category)=>{
        //先更新状态
        this.setState({
            parentId:category.parentId,
            parentName:category.title,
            id:category._id,
        },()=>{this.getData()})
    }
    //显示指定一级分类列表
    showCategorys =()=>{
        this.setState({
            parentId:'0',
            parentName:'',
            subCategorys:[]
        })
    }
    //修改列表
    showModal = (category) => {
        //保存分类对象
        this.category=category
        this.setState({
            open:true,
        })
    };


    handleOk = () => {
        const {mockCategoryData1}=this.state
        if(this.form){
            const categoryId=this.category._id
            const categoryName =this.form.parentTitle||this.category.title
            //清除输入数据
            //发送新请求
            //重新显示列表
            mockCategoryData1.data.forEach((item)=>{
                if(item._id==this.form._id){
                    item.title=this.form.parentTitle
                }
            })
        }
            this.setState({
                open:false,
            })
    };

    handleCancel = () => {
        this.setState({
            open:false,
        })
    };
    //添加列表
    addModal = () => {
        this.setState({
            showAdd:true,
        })
    };
    addOk = () => {
        const {mockCategoryData1}=this.state
        const params={}
        if(this.form){
            params.title=this.form.title
            params.parentId=this.form.parentId
            params.id=this.form.id
            params._id=this.form._id
            //清除输入数据
            //发送新请求
            //重新显示列表
            mockCategoryData1.data.push(params)
            //刷新数据，table未改变
            this.setState({
                mockCategoryData1:mockCategoryData1,
            })
            // -刷新页面
            // window.location.reload()

        }

        this.setState({
            showAdd:false,
        })
    }
    addCancel = () => {
        this.setState({
            showAdd:false,
        })
    };


    render() {
        console.log(this.state.mockCategoryData1.data,'111111mockCategoryData')
        const {parentId,subCategorys,open,id}=this.state
        const category =this.category||{};
        const title = this.state.parentId==='0'?'一级分类列表':(
            <span>
                <Button type="link" onClick={this.showCategorys}>一级分类列表</Button>
                <ArrowRightOutlined style={{marginLeft:3,marginRight:3}}/>
                <span>{this.state.parentName}</span>
            </span>
        )
        const columns = [
            {
                title: '姓名',
                dataIndex: 'title',
                key: 'title',
            },
            {
                title: 'Action',
                dataIndex: '',
                key: 'x',
                width: 250,
                render: (item) =>
                    <div>
                        <Button type="link" onClick={()=>{this.showModal(item)}}>修改分类</Button>
                        {item.parentId==='1'&&this.state.parentId==='0'&&<Button type="link" style={{marginLeft:20}} onClick={()=>{this.showSubCategorys(item)}}>查看子分类</Button>}

                    </div>,
            },
        ]


        return (
            <Space direction="vertical" size={16} style={{width: '100%', height:'100%'}}>
                <Card
                    title={title}
                    extra={<Button type='primary' onClick={()=>{this.addModal()}}><PlusOutlined />添加</Button>}
                    style={{
                        width: '100%',
                        height:'100%'
                    }}
                >
                    <Table
                        rowKey="_id"
                        bordered
                        dataSource={parentId==='0'?this.state.mockCategoryData1.data:subCategorys}
                        columns={columns}

                    />
                    <Modal
                        visible={this.state.open}
                        title="修改分类"
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        footer={[
                            <Button key="back" onClick={this.handleCancel}>
                                返回
                            </Button>,
                            <Button key="submit" type="primary" onClick={this.handleOk}>
                                提交
                            </Button>,
                        ]}
                    >
                        <EditForm category = {this.category} setForm={(form)=>{this.form=form}}/>
                    </Modal>
                    <Modal
                        visible={this.state.showAdd}
                        title="添加分类"
                        onOk={this.addOk}
                        onCancel={this.addCancel}
                        footer={[
                            <Button key="back" onClick={this.addCancel}>
                                返回
                            </Button>,
                            <Button key="submit" type="primary" onClick={this.addOk}>
                                提交
                            </Button>,
                        ]}
                    >
                        <AddModal category={this.state.mockCategoryData1.data} parentName={id} setForm={(form)=>{this.form=form}}/>
                    </Modal>
                </Card>
            </Space>
        );
    }
}

export default Category;